import './page.css'

export default function DisplayInside() {
  return (
    <div className="flex flex-wrap m-auto gap-y-3">
      <div className="demo flex-1/2 border-red-500">
        <div className="flow-root w-[80px]">
          <div className="float-left">I am a floated box!</div>
          <p>I am content inside the container.</p>
        </div>
      </div>

      <div className="demo flex-1/2 border-red-500">
        <div className="display-flow w-[80px]">
          <div className="float-left">I am a floated box!</div>
          <p>I am content inside the container.</p>
        </div>
      </div>

      <div className="demo flex-1/2 border-red-500">
        <div className="display-table w-[80px]">
          <div className="float-left">I am a floated box!</div>
          <p>I am content inside the container.</p>
        </div>
      </div>

      <div className="quote flex-1/2 text-blue-500">
        <div>丫就是display，不过在官方文档中，它指定的是容器内部的display规则。</div>
        <a href="https://devdocs.io/css/display-inside" target="_blank" className="text-cyan-600" rel="noreferrer">
          参考链接
        </a>
      </div>
    </div>
  )
}
